<!DOCTYPE HTML>
<html class="  ">
<head>
    <title>ECMAScript 8都发布了，你还没有用上ECMAScript 6？-APP应用开发|网站建设|平面设计</title>
    <meta name="renderer" content="webkit">
    <meta charset="utf-8" />
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="generator" content="MetInfo 5.3.19"  data-variable="https://show.metinfo.cn/muban/M1156010/328/,cn,115,53,2,M1156010" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="description" content="ES8已经与17年6月底发布，而很多的前端开发者还没有开始用上ES6。本文聊一聊怎么快速入门ES6，并将ES6的语法应用到实战项目中。阅读全文大约需要15分钟。文中以 ES 表示 ECMAScript。今年六月底，TC39发布新一版的ES 8（ES 2017），自从ES6在15年发布之后，每一年TC39都会发布新一版的ES语言标准。我了解的前端开发者中，还有很多人没有用上ES6，有的人是觉得ES5" />
    <meta name="keywords" content="APP应用开发|网站建设|平面设计" />
    <link href="https://show.metinfo.cn/muban/M1156010/328/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link rel='stylesheet' href='https://show.metinfo.cn/muban/M1156010/328/templates/M1156010/cache/metinfo.css?2016122601'>
</head>
<body class="  class-115">

<div class="load-box">
    <svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g>
            <circle cx="35" cy="16.6987298" r="11"></circle>
            <circle cx="16.6987298" cy="35" r="11"></circle>
            <circle cx="10" cy="60" r="11"></circle>
            <circle cx="16.6987298" cy="85" r="11"></circle>
            <circle cx="35" cy="103.30127" r="11"></circle>
            <circle cx="60" cy="110" r="11"></circle>
            <circle cx="85" cy="103.30127" r="11"></circle>
            <circle cx="103.30127" cy="85" r="11"></circle>
            <circle cx="110" cy="60" r="11"></circle>
            <circle cx="103.30127" cy="35" r="11"></circle>
            <circle cx="85" cy="16.6987298" r="11"></circle>
            <circle cx="60" cy="10" r="11"></circle>
        </g>
    </svg>
</div>

<!--[if lte IE 8]>
<div class="text-center padding-top-50 padding-bottom-50 bg-blue-grey-100">
    <p class="browserupgrade font-size-18">你正在使用一个<strong>过时</strong>的浏览器。请<a href="http://browsehappy.com/" target="_blank">升级您的浏览器</a>，以提高您的体验。</p>
</div>
<![endif]-->

<div class="side-open"><hr><hr><hr><hr></div>
<div class="side-box">
    <div class="side-cut">
        <div class="side-shadow"></div>
        <div class="side-bin">

            <div class="side-search">

                <form method="get" action="https://show.metinfo.cn/muban/M1156010/328/search/">
                    <input type='hidden' name='lang' value='cn' />
                    <input type='hidden' name='class1' value='108' />
                    <div class="form-group">
                        <div class="input-search">
                            <button type="submit" class="input-search-btn"><i class="icon wb-search" aria-hidden="true"></i></button>
                            <input class="form-control none-border" name="searchword" value="" placeholder="Search title ...">
                        </div>
                    </div>
                </form>

            </div>

            <div class="side-nav">
                <ul>

                    <li class="nav-first ">
                        <a href="https://show.metinfo.cn/muban/M1156010/328/" title="精彩首页">
                            <i class="fa fa-home"></i>
                            <b>精彩首页</b>
                        </a>
                    </li>

                    <li class="nav-first  ">
                        <a href="../about/"  title="关于我们" data-alert="全部" >
                            <i class="fa fa-home fa-pie-chart"></i>
                            <b>关于我们</b>

                        </a>

                    </li>

                    <li class="nav-first  ">
                        <a href="../server/"  title="服务项目" data-alert="全部" >
                            <i class="fa fa-home fa-coffee"></i>
                            <b>服务项目</b>

                        </a>

                    </li>

                    <li class="nav-first has ">
                        <a href="../picture/"  title="产品中心" data-alert="全部" >
                            <i class="fa fa-home fa-camera"></i>
                            <b>产品中心</b>

                            <p>16</p>

                        </a>

                        <u>&nbsp;</u><i>&nbsp;</i>
                        <ul>
                            <dl>

                                <dt><img width="400" data-original="https://images.metinfo.cn/muban/M1156010/328/upload/201707/1500551146.jpg"></dt>

                                <dd>APP技术原本是对软件进行加速运算或进行大型科学运算的技术，基于Paas开发平台开发出的APP，直接部署在云环境上，形成一种租用云服务的模式。</dd>

                            </dl>

                            <li class="nav-second">
                                <a href="../picture/product.php?lang=cn&class2=111"  title="APP开发" data-alert="全部"><b>APP开发</b></a>

                            </li>

                            <li class="nav-second">
                                <a href="../picture/product.php?lang=cn&class2=112"  title="网站建设" data-alert="全部"><b>网站建设</b></a>

                            </li>

                            <li class="nav-second">
                                <a href="../picture/product.php?lang=cn&class2=113"  title="平面设计" data-alert="全部"><b>平面设计</b></a>

                            </li>

                        </ul>

                    </li>

                    <li class="nav-first has active">
                        <a href="../news/"  title="新闻资讯" data-alert="全部" >
                            <i class="fa fa-home fa-bell"></i>
                            <b>新闻资讯</b>

                            <p>8</p>

                        </a>

                        <u>&nbsp;</u><i>&nbsp;</i>
                        <ul>
                            <dl>

                                <dt><img width="400" data-original="https://images.metinfo.cn/muban/M1156010/328/upload/201707/1500550854.jpg"></dt>

                                <dd>网站打开慢的其中一个原因是图片文件过大，一个网站在打开时需要同时加载很多图片，如果网站中每张图片都很大就容易发生卡顿状态！</dd>

                            </dl>

                            <li class="nav-second">
                                <a href="../news/news.php?lang=cn&class2=115"  title="公司新闻" data-alert="全部"><b>公司新闻</b></a>

                            </li>

                            <li class="nav-second">
                                <a href="../news/news.php?lang=cn&class2=116"  title="行业资讯" data-alert="全部"><b>行业资讯</b></a>

                            </li>

                        </ul>

                    </li>

                    <li class="nav-first  ">
                        <a href="../case/"  title="案例展示" data-alert="全部" >
                            <i class="fa fa-home fa-flag"></i>
                            <b>案例展示</b>

                            <p>24</p>

                        </a>

                    </li>

                    <li class="nav-first  ">
                        <a href="../message/"  title="联系我们" data-alert="全部" >
                            <i class="fa fa-home fa-book"></i>
                            <b>联系我们</b>

                        </a>

                    </li>

                </ul>
            </div>

            <div class="side-foot">
                <div class="side-phone">
                    <p>
                        <b>Call me :</b><a href="tel:400-000-0000">400-000-0000</a>
                    </p>

                    <i class="fa fa-qrcode" data-toggle="modal" data-target="#met-ewm-modal"></i>

                </div>
                <div class="social-box">

                    <audio id="audio" src="../templates/M1156010/min/music/bg.mp3" status="0"></audio>
                    <canvas id="canvas" width="105" height="34"></canvas>

                    <a rel="nofollow" data-toggle="modal" data-target="#met-share-modal"><i class="fa fa-share-alt"></i></a>

                    <a href="http://crm2.qq.com/page/portalpage/wpa.php?uin=40000844433&aty=0&a=0&curl=&ty=1" rel="nofollow" target="_blank"><i class="fa fa-qq"></i></a>

                    <a href="http://www.weibo.com" rel="nofollow" target="_blank"><i class="fa fa-weibo"></i></a>

                </div>

                <div class="side-text">Copyright © 2017 电影快讯</div>

            </div>
        </div>
    </div>
</div>

<div class="side-head nav-open1">
    <div class="side-logo">
        <a href="https://show.metinfo.cn/muban/M1156010/328/" title="APP应用开发|网站建设|平面设计">
            <img data-original="../upload/201707/1500552335.png" data-size="175_40" alt="APP应用开发|网站建设|平面设计" title="APP应用开发|网站建设|平面设计">
        </a>
    </div>

    <div class="sign-box">
        <ul class="sign-ul swiper-nav">

            <li class="sign-li ">
                <a href="../news/"  title="全部">
                    <b>全部</b>
                </a>
            </li>

            <li class="sign-li active">
                <a href="../news/news.php?lang=cn&class2=115"  title="公司新闻"><b>公司新闻</b></a>

            </li>

            <li class="sign-li ">
                <a href="../news/news.php?lang=cn&class2=116"  title="行业资讯"><b>行业资讯</b></a>

            </li>

        </ul>
    </div>

</div>

<div class="side-content ">

    <div class="banner-sub auto not-has" data-height="420|350|200">

    </div>

    <div class="side-html">

        <div class="side-body swiper-lazy" data-background="https://images.metinfo.cn/muban/M1156010/328/upload/201707/1500274209.jpg">

            <section class="met-shownews animsition">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 met-shownews-body">
                            <div class="row">
                                <div class="met-shownews-header">
                                    <h1>ECMAScript 8都发布了，你还没有用上ECMAScript 6？</h1>
                                    <div class="info">
							<span>
								<i class="fa fa-clock-o"></i>
								2017-07-20 16:56:31
							</span>
                                        <span>
								<i class="fa fa-user-plus"></i>
								Metinfo
							</span>
                                        <span>
								<i class="icon wb-eye margin-right-5" aria-hidden="true"></i>16
							</span>
                                    </div>
                                </div>
                                <div class="met-editor lazyload clearfix">
                                    <div><p>ES8已经与17年6月底发布，而很多的前端开发者还没有开始用上ES6。本文聊一聊怎么快速入门ES6，并将ES6的语法应用到实战项目中。</p><p>阅读全文大约需要15分钟。</p><p>文中以 ES 表示 ECMAScript。</p><p>今年六月底，TC39发布新一版的ES 8（ES 2017），自从ES6在15年发布之后，每一年TC39都会发布新一版的ES语言标准。</p><p>我了解的前端开发者中，还有很多人没有用上ES6，有的人是觉得ES5用的挺好的，懒得去学ES6，有的人是有想学ES6的决心，但是苦于没有合适的机会（项目）去实战练习。</p><p>如果你用过React，Vue或Nodejs等，那你多多少少都会使用到一些ES6语法的。</p><p>ES8中的新特性，浏览器厂商和语法转换器还需要一段来实现，不如我们还是先聊聊怎么在你的项目中用上ES6吧。</p><p>什么是ES6？它和ES5有什么区别？</p><p>我们常说的JavaScript是指ES3和ES5，ES6是ECMAScript 6 的缩写。</p><p>对于经常写原生JavaScript的前端开发者来说，对ES5中的语法肯定比较熟悉，比如数组中的一些方法forEach，map，filter，some，every，indexOf，lastIndexOf，reduce，reduceRight ……，以及对象（Object）和函数（Function）都拓展了很多方法，这里不多赘叙。</p><p>ES6给前端开发者带来了很多的新的特性，可以更简单的实现更复杂的操作，很大的提高开发效率，提高代码的整洁性。</p><p>ES6中的新特性有很多，列一些比较常用的特性：</p><p>Block-Scoped Constructs Let and Const（块作用域构造Let and Const）</p><p>Default Parameters（默认参数）</p><p>Template Literals （模板字符串）</p><p>Multi-line Strings （多行字符串）</p><p>Arrow Functions （箭头函数）</p><p>Enhanced Object Literals （增强的对象文本）</p><p>Promises</p><p>Classes（类）</p><p>Modules（模块）</p><p>Destructuring Assignment （解构赋值）</p><p>下面介绍下这些常用的ES6特性。</p><p>Block-Scoped Constructs Let and Const（块作用域构造Let and Const）</p><p>ES6提供了两个新的声明变量的关键字：let和const。而let和const要和块级作用域结合才能发挥其优势。</p><p>什么是块级作用域？</p><p>块级作用域的表示一对大括号{}包围的区域是一个独立的作用域，在这个作用域内用let声明的变量a，只能在这个作用域内被访问到，在这对大括号外面是访问不到a的。</p><p>当然，在块级作用域中还可以声明函数，该函数也是只能作用域内部才能被访问到。所以，在if、else、for甚至是一对单独的{}，都是一个块级作用域。</p><p>在ES6之前，是没有块级作用域的概念的，只有全局作用域和函数作用域两种，并且，用var声明的变量和用function声明的函数会被提前到作用域的顶部，这也就是我们常说的声明提前。</p><p>用let声明的变量是存在于距离声明语句最近的一个作用域（全局作用域、函数作用域或块级作用域）内的，在声明的时候，可选的将其初始化成一个值。</p><p>语法如下：</p><p><br/></p><p>let var1 [= value1] [, var2 [= value2 ] ] [, ..., varN [= valueN]] ;</p><p>这一点与var的声明不同，用var声明的变量是属于离他最近的一个全局作用域或函数作用域中，且声明会被提前。在块级作用域中，var的声明与在全局作用域和函数作用域中是一样的。</p><p><br/></p><p>块级作用域和let声明变量，解决了使用var一些痛点，相当于用let声明的变量不会被提前到作用域顶部。</p><p><br/></p><p>有一点需要注意，let也是声明提前,但是let声明变量的语句必须在使用该变量语句之前，在声明之前引用会报错该变量未被声明，且let不允许重复声明相同名称的变量，否则会报错。我们看下例子：</p><p><br/></p><p>{</p><p>&nbsp; var hello = &#39;Hello&#39;;</p><p>&nbsp; let world = &#39;World&#39;;</p><p>}</p><p>console.log(hello);</p><p>console.log(world);</p><p>在Chrome浏览器的控制台（最新版本的Chrome已支持一部分ES6语法）执行一下，会发现有报错，见下图。constconst声明与let基本相同，它也是存在于块级作用域内。</p><p>有一点区别就是const声明的是常量，即不可被重新赋值改变原值。需要注意，const在声明常量的时候，必须同时给常量初始化赋值。如果只声明，不初始化值的话，会报错。见下面代码。</p><p>const MAX;</p><p>// Uncaught SyntaxError: Missing initializer in const declaration</p><p>声明变量的方法</p><p>在ES5中，可以通过var和function这两种方法来声明变量。</p><p><br/></p><p>而在ES6中，除了增加了let和const两种声明方式，还有接下来要介绍的import和class的声明方式。</p><p>Default Parameters（默认参数）</p><p>默认参数是ES6中对函数拓展的一个特性，可以直接为函数的参数设置默认值，当某一参数设置了默认值时，如果调用函数的时候没有传该参数，则该参数的值为默认值，如果传了该参数，则该参数的值为传递的参数值。</p><p>在ES6之前，我们可以通过手动的方式，为函数的参数设置默认值，代码如下：</p><p>function sign (x) {</p><p>&nbsp; if (typeof x === &#39;undefined&#39;) {</p><p>&nbsp; &nbsp; x = &#39;default&#39;</p><p>&nbsp; }</p><p>&nbsp; console.log(x)</p><p>}</p><p>sign(&#39;new sign&#39;) &nbsp; &nbsp;// new sign</p><p>sign() &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// default</p><p>将上述代码换成ES6模式，可以这样写：</p><p><br/></p><p>function sign (x = &#39;default&#39;) {</p><p>&nbsp; console.log(x) &nbsp; &nbsp;</p><p>}</p><p>sign(&#39;new sign&#39;) &nbsp; &nbsp;// new sign</p><p>sign() &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// default</p><p>Template Literals （模板字符串）</p><p><br/></p><p>ES6提供了模板字符串的特性，模板字符串是使用反引号（`）和${}实现字符串的拼接，字符串中可以嵌入变量。</p><p>在ES6之前，我们一般这样输出模板：</p><p>var name = &#39;Henry&#39;;</p><p>var welcome = &#39;Hello, &#39; + name + &#39;!&#39;;</p><p>console.log(welcome); &nbsp; // Hello, Henry!</p><p>在ES6中，模板字符串可以这样拼接字符串：</p><p>let name = &#39;Henry&#39;;</p><p>let welcome = `Hello, ${ name }!`;</p><p>console.log(welcome); &nbsp; // Hello, Henry</p><p>模板字符串的计算规则是在两个反引号之间将字符串拼接到一起，如果反引号之间含有${}，则会计算这对大括号内的值，大括号里面可以是任意的JavaScript表达式，可以进行运算和引用对象属性。</p><p>let a = 3;</p><p>let number = `$ {a + 2 }`;</p><p>console.log(`${ number }`); &nbsp; &nbsp;// 5</p><p><br/></p><p>let b = { c: 2, d: 4 };</p><p>console.log(`${ b.c * b.d }`) ; &nbsp; &nbsp; // 8</p><p>Multi-line Strings （多行字符串）</p><p><br/></p><p>多行字符串是模板字符串的拓展，它跟模板字符串是同样的解析方式，不同的是，它可以拼接多行的字符串，且拼接的字符串中会保留所有的空格和缩进。</p><p>如果需要用字符串来拼接DOM树结构时，可以这样写：</p><p>let titleValue = &#39;This is a title&#39;；</p><p>let htmlStr = `</p><p>&nbsp; &lt;div&gt;</p><p>&nbsp; &nbsp; &nbsp; &lt;h2&gt;${ titleValue }&lt;/h2&gt;</p><p>&nbsp; &nbsp; &nbsp; &lt;p&gt;This is a paragraph.&lt;/p&gt;</p><p>&nbsp; &lt;/div&gt;</p><p>`;</p><p>上述代码中，能看到JavaScript代码和伪html代码的结合，完全可以将模板字符串的多行字符串封装成一个页面模板工具，绝对是轻量高效的。</p><p>还有，这种书写方式是不是很眼熟，跟React的JSX是不是很像双胞胎啊。</p><p>Arrow Functions （箭头函数）</p><p>在ES6中，可以使用箭头（=&gt;）来声明一个函数，称作箭头函数。</p><p>ES5中声明一个函数，可以这样写：</p><p>var func = function (a) {</p><p>&nbsp; return a + 2;</p><p>}</p><p>将这个函数换成 箭头函数：</p><p>let func = a =&gt; a + 2;</p><p>如果函数有多个参数，需要用括号包含所有参数，只有一个参数的时候，可以省略括号，如果没有设置参数，也必须有括号。示例如下：</p><p><br/></p><p>let func1 = (arg1, arg2, arg3) =&gt; {</p><p>&nbsp; return arg1 + arg2 + arg3;</p><p>}</p><p><br/></p><p>let func2 = arg =&gt; {</p><p>&nbsp; console.log(arg)</p><p>}</p><p>let func3 = () =&gt; {</p><p>&nbsp; console.log(`This is an arrow function.`)</p><p>}</p><p>需要注意的是，箭头函数没有自己的this，如果在箭头函数内部使用this，那样这个this是箭头函数外部的this，也是因为箭头函数没有this，所以，箭头函数不能用作构造函数。如果用箭头函数来写回调函数时，就不用再将外部this保存起来了。</p><p>// ES5</p><p>function foo() {</p><p>&nbsp; var _this = this;</p><p>&nbsp; &nbsp;&nbsp;</p><p>&nbsp; setTimeout(function() {</p><p>&nbsp; &nbsp; console.log(&#39;id:&#39;, _this.id); &nbsp; &nbsp; &nbsp; &nbsp;</p><p>&nbsp; }, 200)</p><p>}</p><p>// ES6</p><p>function foo() {</p><p>&nbsp; setTimeout(() =&gt; {</p><p>&nbsp; &nbsp; console.log(`id:${ this.id }`) &nbsp; &nbsp; &nbsp; &nbsp;</p><p>&nbsp; }, 200)</p><p>}</p><p>Enhanced Object Literals （增强的对象文本）</p><p><br/></p><p>在ES6，对象字面值扩展支持在创建时设置原型，简写foo：foo分配，定义方法，加工父函数（super calls），计算属性名(动态)。总之，这些也带来了对象字面值和类声明紧密联系起来，让基于对象的设计得益于一些同样的便利。</p><p><br/></p><p>var obj = {</p><p>&nbsp; // __proto__ 原型</p><p>&nbsp; __proto__: theProtoObj,</p><p>&nbsp; // Shorthand for ‘handler: handler’ &nbsp;简写</p><p>&nbsp; handler,</p><p>&nbsp; // Methods</p><p>&nbsp; toString() {</p><p>&nbsp; &nbsp; // Super calls &nbsp; &nbsp; 继承</p><p>&nbsp; &nbsp; return &quot;d &quot; + super.toString();</p><p>&nbsp; },</p><p>&nbsp; // Computed (dynamic) property names 计算属性名</p><p>&nbsp; [&#39;prop_&#39; + (() =&gt; 42)()]: &#39;name&#39;</p><p>};</p><p>Promises</p><p>Promise是异步编程的一种解决方案，它是一个对象，且只要开始就会一直进行下去，直到成功或者失败。就像它的字面意思诺言一样，一个诺言，只要被许下，就只有两种解决：成功或失败。</p><p>Promise的结果是由异步操作的结果决定的，且一旦结果形成，便不可再被改变，任何时候都得到同样的结果。</p><p>需要注意的是：Promise被新建后，便无法被取消，会执行下去，直到出现结果；如果不设置回调，Promise内部抛出的异常，不会反应到外部。</p><div id="metinfo_additional"></div><br /><span>标签:&nbsp&nbsp<a href="../search/search.php?class1=&class2=&class3=&searchtype=0&searchword=&lang=cn" target="_blank" title="链接关键词"></a>&nbsp<a href="../search/search.php?class1=&class2=&class3=&searchtype=0&searchword=%E6%9D%A8%E5%AD%90%E5%A7%97&lang=cn" target="_blank" title="链接关键词">杨子姗</a>&nbsp<a href="../search/search.php?class1=&class2=&class3=&searchtype=0&searchword=%E5%85%BD%E6%98%93%E5%B0%8F%E6%98%9F&lang=cn" target="_blank" title="链接关键词">兽易小星</a>&nbsp<a href="../search/search.php?class1=&class2=&class3=&searchtype=0&searchword=%E5%88%98%E5%BE%AA%E5%AD%90%E5%A2%A8&lang=cn" target="_blank" title="链接关键词">刘循子墨</a>&nbsp<a href="../search/search.php?class1=&class2=&class3=&searchtype=0&searchword=%E5%8E%9F%E7%8F%AD%E4%BA%BA%E9%A9%AC%E6%89%93%E9%80%A0&lang=cn" target="_blank" title="链接关键词">原班人马打造</a></span></div>

                                </div>
                                <div class="met-shownews-footer">

                                    <ul class="pager pager-round">
                                        <li class="previous ">
                                            <a href="shownews.php?lang=cn&id=55" title="如何成为一个优秀的工程师？“看到问题也不要去问别人，就把它Fix。”">
                                                上一篇
                                                <span aria-hidden="true" class='hidden-xs'>：如何成为一个优秀的工程师？“看到问题也不要去问别人，就把它Fix。”</span>
                                            </a>
                                        </li>
                                        <li class="next ">
                                            <a href="shownews.php?lang=cn&id=54" title="在美团点评当工程师的第一年总结，慢慢融入团队后，会迎来一个成长期。">
                                                下一篇
                                                <span aria-hidden="true" class='hidden-xs'>：在美团点评当工程师的第一年总结，慢慢融入团队后，会迎来一个成长期。</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="row">
                                <div class="met-news-bar">

                                    <div class="sidenews-lists">
                                        <h3><span>为您推荐</span></h3>
                                        <ul >

                                            <li>
                                                <a href="../news/shownews.php?lang=cn&id=57" title="是时候改变你对微服务的认知了！" target='_self'>

                                                    <img class="swiper-lazy" data-src='../upload/thumb_src/125_100/1500454853.jpg'>

                                                    <b>是时候改变你对微服务的认知了！</b>
                                                    <p>2017-07-20</p>
                                                </a>
                                            </li>

                                            <li>
                                                <a href="../news/shownews.php?lang=cn&id=55" title="如何成为一个优秀的工程师？“看到问题也不要去问别人，就把它Fix。”" target='_self'>

                                                    <img class="swiper-lazy" data-src='../upload/thumb_src/125_100/1500450968.jpg'>

                                                    <b>如何成为一个优秀的工程师？“看到问题也不要去问别人，就把它Fix。”</b>
                                                    <p>2017-07-20</p>
                                                </a>
                                            </li>

                                            <li>
                                                <a href="../news/shownews.php?lang=cn&id=52" title="精选！15 个必备的 VSCode 插件（前端类）" target='_self'>

                                                    <img class="swiper-lazy" data-src='../upload/thumb_src/125_100/1500449642.jpg'>

                                                    <b>精选！15 个必备的 VSCode 插件（前端类）</b>
                                                    <p>2017-07-20</p>
                                                </a>
                                            </li>

                                            <li>
                                                <a href="../news/shownews.php?lang=cn&id=56" title="Zdal分库分表：支付宝是如何在分布式环境下完爆数据库压力的？" target='_self'>

                                                    <img class="swiper-lazy" data-src='../upload/thumb_src/125_100/1500452786.jpg'>

                                                    <b>Zdal分库分表：支付宝是如何在分布式环境下完爆数据库压力的？</b>
                                                    <p>2017-07-20</p>
                                                </a>
                                            </li>

                                            <li>
                                                <a href="../news/shownews.php?lang=cn&id=53" title="ECMAScript 8都发布了，你还没有用上ECMAScript 6？" target='_self'>

                                                    <img class="swiper-lazy" data-src='../upload/thumb_src/125_100/1500451877.jpg'>

                                                    <b>ECMAScript 8都发布了，你还没有用上ECMAScript 6？</b>
                                                    <p>2017-07-20</p>
                                                </a>
                                            </li>

                                        </ul>
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </section>

            <footer>
                <div class="foot-left">
                    <div class="foot-nav">

                        <a href="../about/" title="关于我们">关于我们</a>

                        <a href="../server/" title="服务项目">服务项目</a>

                        <a href="../picture/" title="产品中心">产品中心</a>

                        <a href="../news/" title="新闻资讯">新闻资讯</a>

                        <a href="../case/" title="案例展示">案例展示</a>

                        <a href="../message/" title="联系我们">联系我们</a>

                    </div>
                    <div class="powered_by_metinfo">
                        Powered by <a href="http://www.MetInfo.cn/#copyright" target="_blank" title="企业网站管理系统">MetInfo</a> 5.3.19
                    </div>
                </div>
                <div class="foot-right">
                    <div class="foot-text"><p><p>— 努力创造优质作品，奉献更多精品佳作 —</p></p>
                    </div>

                    <div class="text-link">
                        <ul>
                            <li>友情链接：</li>

                            <li><a href="http://www.baidu.com" title="" target="_blank">品牌设计</a></li>

                            <li><a href="https://www.baidu.com" title="" target="_blank">产品设计</a></li>

                            <li><a href="http://www.baidu.com" title="" target="_blank">LOGO设计</a></li>

                        </ul>
                    </div>

                </div>
            </footer>

            <input type="hidden" name="lazyloadbg" value="base64">

        </div>
    </div>
    <div class="side-scroll swiper-scrollbar"></div>
</div>

<div class="modal fade modal-3d-flip-vertical" id="met-ewm-modal" aria-hidden="true" role="dialog" tabindex="-1">
    <div class="modal-ewmlog modal-center">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <img data-size="380_380" data-original="https://images.metinfo.cn/muban/M1156010/328/upload/201501/1422258610.jpg" alt="ECMAScript 8都发布了，你还没有用上ECMAScript 6？-APP应用开发|网站建设|平面设计">
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-3d-flip-vertical" id="met-share-modal" aria-hidden="true" role="dialog" tabindex="-1">
    <div class="modal-sharelog modal-center">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>

                <div class="bdsharebuttonbox info_share">

                    <a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>

                    <a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>

                    <a class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>

                    <a class="bds_renren" data-cmd="renren" title="分享到人人网"></a>

                    <a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>

                    <a class="bds_isohu" data-cmd="isohu" title="分享到我的搜狐"></a>

                    <a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>

                    <a class="bds_tqf" data-cmd="tqf" title="分享到腾讯朋友"></a>

                    <a class="bds_huaban" data-cmd="huaban" title="分享到花瓣"></a>

                    <a class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>

                    <a class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a>

                    <a class="bds_twi" data-cmd="twi" title="分享到Twitter"></a>

                    <a class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a>

                    <a class="bds_kaixin001" data-cmd="kaixin001" title="分享到开心网"></a>

                    <a class="bds_bdysc" data-cmd="bdysc" title="分享到百度云收藏"></a>

                    <a class="bds_bdxc" data-cmd="bdxc" title="分享到百度相册"></a>

                    <a class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a>

                    <a class="bds_bdhome" data-cmd="bdhome" title="分享到百度新首页"></a>

                    <a class="bds_thx" data-cmd="thx" title="分享到和讯微博"></a>

                    <a class="bds_ibaidu" data-cmd="ibaidu" title="分享到百度中心"></a>

                    <a class="bds_meilishuo" data-cmd="meilishuo" title="分享到美丽说"></a>

                    <a class="bds_mogujie" data-cmd="mogujie" title="分享到蘑菇街"></a>

                    <a class="bds_duitang" data-cmd="duitang" title="分享到堆糖"></a>

                    <a class="bds_diandian" data-cmd="diandian" title="分享到点点网"></a>

                    <a class="bds_hx" data-cmd="hx" title="分享到和讯"></a>

                    <a class="bds_fx" data-cmd="fx" title="分享到飞信"></a>

                    <a class="bds_youdao" data-cmd="youdao" title="分享到有道云笔记"></a>

                    <a class="bds_qingbiji" data-cmd="qingbiji" title="分享到轻笔记"></a>

                    <a class="bds_sdo" data-cmd="sdo" title="分享到麦库记事"></a>

                    <a class="bds_xinhua" data-cmd="xinhua" title="分享到新华微博"></a>

                    <a class="bds_people" data-cmd="people" title="分享到人民微博"></a>

                    <a class="bds_mail" data-cmd="mail" title="分享到邮件分享"></a>

                    <a class="bds_yaolan" data-cmd="yaolan" title="分享到摇篮空间"></a>

                    <a class="bds_ty" data-cmd="ty" title="分享到天涯社区"></a>

                    <a class="bds_wealink" data-cmd="wealink" title="分享到若邻网"></a>

                    <a class="bds_h163" data-cmd="h163" title="分享到网易热"></a>

                    <a class="bds_iguba" data-cmd="iguba" title="分享到股吧"></a>

                    <a class="bds_evernotecn" data-cmd="evernotecn" title="分享到印象笔记"></a>

                    <a class="bds_print" data-cmd="print" title="分享到打印"></a>

                    <a class="bds_mshare" data-cmd="mshare" title="分享到一键分享"></a>

                    <a class="bds_copy" data-cmd="copy" title="分享到复制网址"></a>

                </div>

            </div>
        </div>
    </div>
</div>


<script src="https://show.metinfo.cn/muban/M1156010/328/templates/M1156010/cache/metinfo.js?2016122601"></script>

</body>
</html>